<script setup lang="ts">
import { getTaskInfo } from '@/api/task/task';
import { TaskForm } from '@/api/task/task/types';
import ApprovalRecord from '@/components/Process/approvalRecord.vue';
import SubmitVerify from '@/components/Process/submitVerify.vue';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
//路由参数
const routeParams = ref<Record<string, any>>({});
//提交组件
const submitVerifyRef = ref<InstanceType<typeof SubmitVerify>>();
//审批记录组件
const approvalRecordRef = ref<InstanceType<typeof ApprovalRecord>>();

const taskVariables = ref<Record<string, any>>({});
const initFormData: TaskForm = {
  taskId: undefined,
  mainTaskId: undefined,
  processInstanceId: undefined,
  handlerUserName: undefined,
  collaborators: undefined,
  taskName: undefined,
  taskTypeId: undefined,
  content: undefined,
  ruTaskId: undefined
};

const form = ref<TaskForm>({
  ...initFormData
});

const reset = () => {
  form.value = { ...initFormData };
};

const loading = ref(false);
const getInfo = () => {
  loading.value = true;
  nextTick(async () => {
    const res = await getTaskInfo(routeParams.value.processInstanceId);
    Object.assign(form.value, res.data);
    loading.value = false;
  });
};

//返回
const goBack = () => {
  proxy.$tab.closePage(proxy.$route);
  proxy.$router.go(-1);
};

//提交回调
const submitCallback = async () => {
  await proxy.$tab.closePage(proxy.$route);
  proxy.$router.go(-1);
};
//审批
const approvalVerifyOpen = async () => {
  const params = {
    id: form.value.ruTaskId
    // score: form.value.score,
    // originalScore: form.value.originalScore
  };
  submitVerifyRef.value.openDialog(params);
};
//审批记录
const handleApprovalRecord = () => {
  approvalRecordRef.value.init(routeParams.value.processInstanceId);
};

const convertEnclosure = (enclosure: string) => {
  return (enclosure || '').split(',');
};

const downloadFile = (item, taskId) => {
  const fileExtension = item.substring(item.lastIndexOf('.') + 1);
  proxy?.download(
    '/oa/restockingPlan/export',
    {
      ryTaskId: taskId,
      enclosure: item
    },
    `补货计划_审批查看表（仅供查看）_${new Date().getTime()}.${fileExtension}`
  );
};

onMounted(() => {
  nextTick(async () => {
    routeParams.value = proxy.$route.query;
    reset();
    loading.value = false;
    if (routeParams.value.type === 'update' || routeParams.value.type === 'view' || routeParams.value.type === 'approval') {
      getInfo();
    }
  });
});
</script>

<template>
  <el-card shadow="never" class="ma-10">
    <div style="display: flex; justify-content: space-between">
      <div>
        <el-button v-if="routeParams.type === 'approval'" :loading="loading" type="primary" @click="approvalVerifyOpen"> 审批 </el-button>
        <el-button v-if="form && form.processInstanceId && form.status !== 'draft'" type="primary" @click="handleApprovalRecord">流程进度 </el-button>
      </div>
      <div>
        <el-button style="float: right" @click="goBack()">返回</el-button>
      </div>
    </div>
  </el-card>
  <el-card class="ma-10">
    <template #header>
      <div class="card-header">
        <span>任务流程</span>
      </div>
    </template>
    <el-row>
      <el-col :span="6" class="my-4">
        <span class="text-right mr-2 text-sm">任务名称：</span>
        <el-text>{{ form.taskName }}</el-text>
      </el-col>
      <el-col :span="6" class="my-4">
        <span class="inline-block text-right mr-2 text-sm">负责人：</span>
        <el-text>{{ form.handlerUserName }}</el-text>
      </el-col>
      <el-col :span="6" class="my-4">
        <span class="inline-block text-right mr-2 text-sm">任务类型：</span>
        <el-text>{{ form.taskTypeName }}</el-text>
      </el-col>
      <el-col :span="6" class="my-4">
        <span class="inline-block text-right mr-2 text-sm">协调人：</span>
        <el-text v-for="(collaborator, index) in form.collaborators" :key="collaborator.handlerUserId" :value="collaborator.handlerUserName">
          {{ collaborator.handlerUserName }}
        </el-text>
      </el-col>
      <!--      <el-col :span="6" class="my-4">-->
      <!--        <span class="inline-block text-right mr-2 text-sm">任务总绩效分：</span>-->
      <!--        <el-text>{{ form.originalScore }}</el-text>-->
      <!--      </el-col>-->
      <!--      <el-col :span="6" class="my-4">-->
      <!--        <span class="inline-block text-right mr-2 text-sm">实际绩效分：</span>-->
      <!--        <el-text>{{ form.score }}</el-text>-->
      <!--      </el-col>-->
      <el-row>
        <el-col :span="12" class="my-4">
          <span class="inline-block text-right mr-2 text-sm">任务预计开始时间：</span>
          <el-text>{{ form.expectedStartTime }}</el-text>
        </el-col>
        <el-col :span="12" class="my-4">
          <span class="inline-block text-right mr-2 text-sm">任务预计结束时间：</span>
          <el-text>{{ form.expectedEndTime }}</el-text>
        </el-col>
        <el-col :span="12" class="my-4">
          <span class="inline-block text-right mr-2 text-sm">任务实际开始时间：</span>
          <el-text>{{ form.actualStartTime }}</el-text>
        </el-col>
        <el-col :span="12" class="my-4">
          <span class="inline-block text-right mr-2 text-sm">任务实际结束时间：</span>
          <el-text>{{ form.actualEndTime }}</el-text>
        </el-col>
        <el-col :span="24" class="my-4 !flex !items-start">
          <span class="inline-block text-right mr-2 text-sm">附件：</span>
          <div>
            <div v-for="item in convertEnclosure(form.enclosure)" :key="item" class="my-2">
              <el-text>
                {{ item }}
                <el-button type="primary" class="ml-2" size="small" :disabled="Number(form.taskTypeId) != 3" @click="downloadFile(item, form.taskId)"
                  >下载
                </el-button>
              </el-text>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-col :span="24" class="my-4" style="display: flex">
        <span class="inline-block text-right mr-2 text-sm">任务内容：</span>
        <div class="flex-1">
          <el-input v-model="form.content" :rows="4" readonly type="textarea"></el-input>
        </div>
      </el-col>
      <el-col :span="24" class="my-4" style="display: flex">
        <span class="w-17 inline-block text-right mr-2 text-sm">备注：</span>
        <el-input v-model="form.remark" class="flex-1" :rows="4" readonly type="textarea"></el-input>
      </el-col>
    </el-row>
    <!-- 提交组件 -->
    <submitVerify ref="submitVerifyRef" :task-variables="taskVariables" @submit-callback="submitCallback" />
    <!-- 审批记录 -->
    <approvalRecord ref="approvalRecordRef" />
  </el-card>
</template>

<style scoped lang="scss"></style>
